<template>
	<view class="page pd-30">
		<view class="flex progress">
			<block v-for="(item, index) of types" :key="'type' + index">
				<view @click="change(item.val)" :class="{active: type == item.val}">
					<view class="step">{{item.name}}</view>
					<view>
						<text class="line">一</text>
					</view>
				</view>
				<view v-if="item.val < 3" class="flex1"></view>
			</block>
		</view>
		
		<view class="order" v-for="(order, index) of orders" :key="index" :class="{show: type == -1 || type == order.status}">
			<view class="flex sn">
				<text class="flex1">订单号  {{order.sn}}</text>
				<text>{{order.created_at}}</text>
			</view>
			<view class="flex flex-center item card">
				<image class="icon" src="@/static/icon/icon-card.png" mode="widthFix"></image>
				<text class="flex1">{{order.goodsinfo.name}}</text>
				<!-- <text>x1</text> -->
			</view>
			
			<view v-if="order.status > 0" class="flex flex-center item time">
				<image class="icon" src="@/static/icon/icon-time.png" mode="widthFix"></image>
				<text class="flex1">预约时间：{{order.time}}{{order.type}}</text>
			</view>
			
			<view v-if="order.shop" class="flex flex-center item shop">
				<image class="icon" src="@/static/icon/icon-location.png" mode="widthFix"></image>
				<text class="flex1">{{order.shopinfo.name}}</text>
			</view>
			
			<view class="flex mg-top-30">
				<view class="flex1"></view>
				
				<!-- 未预约 -->
				<view v-if="order.status == 0 && order.can_book" style="width:220rpx;" @click="to('./order-appointment?sn=' + order.sn_pass)">
					<my-button title="立即预约" line-height="68rpx" font-size="28rpx" radius="18rpx" bg-color="#ff6e0f" color="#fff" />
				</view>
				<!-- 过期 -->
				<my-button v-if="order.status == 0 && order.can_book == false" class="mg-left-10" title="已过期" line-height="68rpx" radius="18rpx" style="width: 220rpx;" bg-color="#ccc" color="#fff" border="1px solid #ccc" />
				
				<view v-if="(order.status == 1 || order.status == 2) && order.can_update " style="width:220rpx;" @click="to('./order-submit?sn=' + order.sn_pass)">
					<my-button title="修改" line-height="68rpx" font-size="28rpx" radius="18rpx"  color="#ff6e0f"></my-button>
				</view>
				
				
				<view v-if="order.status > 0 && order.can_book" style="width:220rpx;margin-left: 30rpx;" @click="to('./order-finish?sn=' + order.sn_pass)">
					<my-button title="预约详情" line-height="68rpx" font-size="28rpx" color="#fff" bgColor="#ff6e0f" radius="18rpx"></my-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import order from '@/api/order';
	
	export default {
		data() {
			return {
				type: 0,
				userId: 0,
				orders: [],
				types: [
					{
						name: '全部',
						val: -1
					},
					{
						name: '未预约',
						val: 0
					},
					{
						name: '预约中',
						val: 1
					},
					{
						name: '待拍摄',
						val: 2
					},
					{
						name: '已完成',
						val: 3
					}
				]
			};
		},
		created() {
			this.userId = this.$route.query.uid;
			this.getOrders()
		},
		methods:{
			change(type) {
				this.type = type;
			},
			getOrders() {
				order.getOrders(this.userId).then(res => {
					let orders = res.data
					this.orders = orders.map(order => {
						order.created_at = order.created_at.substr(0, 10);
						order.time = order.time ? order.time.substr(0, 16) : null;
						return order;
					})
					
				})
			},
			to(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
.page{
	background-color: #F6F6F6;
}

$colorFule: #ff6e0f;
.progress{
	overflow: hidden;
	.line{
		height: 2px;
		width: 50rpx;
		overflow: hidden;
		background-color: rgba(0,0,0,0);
		margin:auto;
		margin-top: 10rpx;
		display: block;
		
	}
	.step{
		font-size: 32rpx;
		font-weight: bold;
		color: #666666;
	}
	
	.active {
		.line{
			background: $colorFule;
		}	
		.step{
			color: $colorFule;
		}
	}
}

.order {
	border-radius: 24rpx;
	background-color: #fff;
	padding: 30rpx;
	margin-top: 40rpx;
	display: none;
	&.show{
		display: block;
	}
	.sn{
		color: #999999;
		font-size: 26rpx;
		border-bottom: 1px solid #E9E9E9;
		padding: 20rpx 0;
	}
	
	.item{
		padding: 20rpx 0;
		// border-bottom: 1px solid #E9E9E9;
	}
	.icon{
		width: 24rpx;
		margin-right: 20rpx;
	}
	.card{
		font-size: 36rpx;
		font-weight: bold;
	}
	.time{
		font-size: 32rpx;
		color: #232323;
		font-weight: bold;
	}
	.shop{
		font-size: 26rpx;
		color: $colorFule;
	}
}
</style>
